<template>
  <div class="ai-follow-detail">
    <TopNavBar :title="title" type="back" rightType="true" @rightClick="handleRightClick" />
    <van-tabs  v-model:active="tabIndex" color="#222" line-width="30px" background="#fff" title-active-color="#222" title-inactive-color="#888" class="tab-bar">
      <van-tab v-for="(value,index) in tabMap" :title="value" :key="index" >
        <!-- <div>{{ value }}</div> -->
      </van-tab>
      <!-- <van-tab title="AI GPT" />
      <van-tab title="投行公司" />
      <van-tab title="知名基金經理" /> -->
    </van-tabs>
    <div class="follow-list">
      <div v-for="item in list" :key="item.name" class="follow-item" @click="goDetail(item)">
        <img class="avatar" :src="item.avatar" />
        <div class="info">
          <div class="name">{{ item.name }}</div>
          <div class="desc">{{ item.bio }}</div>
          <div class="profit">年平均收益 <span class="profit-value">+{{ item.annualAvgYield }}%</span></div>
        </div>
        <img class="arrow" src="https://amfshe.top/assets/right-arrow-black.ff12b4f8.svg" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Tabs as VanTabs, Tab as VanTab } from 'vant'
import { getProductListApi, getInvestListApi, submitFollowOrderApi } from '@/api/ai/index'
const route = useRoute()
const router = useRouter()
const title = ref(route.query.title || 'AI跟投')
const tabIndex = ref(0)
const tabMap = ref(['全部']) // , 'AI GPT', '投行公司', '知名基金經理'
const getTabList = async () => {
  try {
    let res = await getProductListApi()
    
    
    if (res.code === 200) {
      // list.value = res.data
      console.log(res.data)
      res.data.forEach(element => {
        tabMap.value.push(element.nameZh)
      });
      // tabMap.push(res.data)
      // historyList.value = fifterTimeDown(result)
      // historyNewList.value = historyList.value
      // filterEyes()
      // closeToast()
    } else {
      // closeToast()
    }
  }
  catch (error) {
    console.log(error)
  }
}
getTabList()
const tab = ref('全部')

watch(tabIndex, (val) => {
  tab.value = tabMap[val]
  getList(tab.value)
})

const list = ref([
  { name: 'Nathaniel Whittemore', desc: 'Well-known investors', profit: 65, avatar: 'https://randomuser.me/api/portraits/men/1.jpg' },
  { name: 'Maria Elvira Salazar', desc: 'US Treasury Bill', profit: 62, avatar: 'https://randomuser.me/api/portraits/women/2.jpg' },
  { name: 'William Keating', desc: 'Bank America Corp', profit: 62, avatar: 'https://randomuser.me/api/portraits/men/3.jpg' },
  { name: 'Benjamin Cowen', desc: 'stock analyst', profit: 57, avatar: 'https://randomuser.me/api/portraits/men/4.jpg' },
  { name: 'Kevin Hern', desc: 'Vuzix Corporation', profit: 55, avatar: 'https://randomuser.me/api/portraits/men/5.jpg' },
  { name: 'Virginia Foxx', desc: 'Duke Energy Corporat...', profit: 55, avatar: 'https://randomuser.me/api/portraits/women/6.jpg' },
  { name: 'Natalie Brunell', desc: 'Investment reporter', profit: 54, avatar: 'https://randomuser.me/api/portraits/women/7.jpg' },
])

const getList = async (status) => {
  try {
    let params = `recommendedProduct=${tabIndex.value}`
    if (tabIndex.value == 0) {
      params = `recommendedProduct=`
    }
    let res = await getInvestListApi(params)
    
    
    if (res.code === 200) {
      list.value = res.data
      // historyList.value = fifterTimeDown(result)
      // historyNewList.value = historyList.value
      // filterEyes()
      // closeToast()
    } else {
      // closeToast()
    }
  } catch (error) {
    console.log(error)
    // closeToast()
  }
}
getList(0)
onMounted(() => {
  
}) 
function goDetail(item) {
  router.push({
    path: '/aiFollowPersonDetail',
    query: {
      // name: item.name,
      // avatar: item.avatar,
      // desc: item.desc,
      // profit: item.profit,
      id: item.id
    }
  })
}
function handleRightClick() {
  router.push({ path: '/ai-follow-order-list' })
}
</script>

<style scoped>
.ai-follow-detail {
  background: #f6f8fa;
  min-height: 100vh;
  :deep(.van-tabs__nav) {
    width:255px; 
  } 
}
.tab-bar {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 0 0 0 12px;
  border-bottom: 1.5px solid #eee;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}
.tab {
  padding: 16px 18px 12px 0;
  color: #888;
  cursor: pointer;
  position: relative;
}
.tab.active {
  color: #000;
}
.tab.active::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background: #000;
  border-radius: 2px;
}
.follow-list {
  padding: 0 0 0 0;
}
.follow-item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 14px;
  margin: 12px 16px 0 16px;
  padding: 16px 12px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04);
}
.avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 14px;
}
.info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.name {
  font-size: 17px;
  font-weight: 700;
  color: #222;
}
.desc {
  font-size: 13px;
  color: #888;
  margin-bottom: 2px;
}
.profit {
  font-size: 14px;
  color: #222;
  margin-top: 2px;
}
.profit-value {
  color: #0bb07b;
  font-weight: 700;
  margin-left: 4px;
}
.arrow {
  width: 22px;
  height: 22px;
  margin-left: 8px;
}
</style> 